import React, { Component } from "react"
// import ReactDom from 'react-dom'
import ReactPullLoad, { STATS } from 'react-pullload'
import creatHistory from 'history/createHashHistory' 
import './style.scss'
import { Drawer } from 'antd';
import {getBookText,getBookNum, getBookname} from './../../utils/api'
let num =0
class Read extends Component{    
    state = {
        visible: false,
        hasMore: true,
        data: [],
        action: STATS.init,
        index: 1,
        chapter: [],
        title:''

    }
    /* 护眼模式 */
    bgcolor(type) {
        switch (type) {
            case "a":
                this.refs.a.style.color = "#B93221";
                this.refs.a.style.borderColor = "#B93221";
                this.refs.b.style.color = "#fff";
                this.refs.b.style.borderColor = "#535353";
                this.refs.c.style.color = "#fff";
                this.refs.c.style.borderColor = "#535353";
                this.refs.boss.style.backgroundColor = "#EEE6DD";
                this.refs.boss.style.color = '#5C5D58'
                break;
            case "b":
                this.refs.b.style.color = "#B93221";
                this.refs.b.style.borderColor = "#B93221";
                this.refs.a.style.color = "#fff";
                this.refs.a.style.borderColor = "#535353";
                this.refs.c.style.color = "#fff";
                this.refs.c.style.borderColor = "#535353";
                this.refs.boss.style.backgroundColor = "#0C0C0C";
                this.refs.boss.style.color = '#666666'
                break;
            case "c":
                this.refs.c.style.color = "#B93221";
                this.refs.c.style.borderColor = "#B93221";
                this.refs.b.style.color = "#fff";
                this.refs.b.style.borderColor = "#535353";
                this.refs.a.style.color = "#fff";
                this.refs.a.style.borderColor = "#535353";
                this.refs.boss.style.backgroundColor = "#A3C784";
                this.refs.boss.style.color = '#2F4E29'
                break;
            default: return
        }
    }
    /* 上一章 */
    Lastchapter(e) {
        /* 阻止一下事件冒泡 */
        e.stopPropagation()
        if(num===0) return
        getBookText('201002', this.state.chapter[--num].cid).then(res => {
            this.setState({
                data: [{
                    title: res.title,
                    p:res.content
              }]
          })
      })
    }
    /* 下一章 */
    Nextchapter(e) {
        /* 阻止一下事件冒泡 */
        e.stopPropagation()
        console.log(1)
        if(num===this.state.chapter.length-1) return
        getBookText('201002', this.state.chapter[++num].cid).then(res => {
            this.setState({
                data: [{
                    title: res.title,
                    p:res.content
              }]
            })
            
            console.log( this.refs.div.scrollTo)
            this.refs.div.scrollTo(0,0)
      })
        
    }
/* 章节目录 */
showDrawer = () => {
    this.setState({
      visible: true,
    });
  };

onClose = () => {
    this.setState({
      visible: false,
    });
    };

    componentDidMount() {
        let data = []
      
    /* 渲染章节 */
        getBookNum('201002').then(res => {
            // console.log(res)
            this.setState({
                chapter: res.chapters,
                title:res.title
            })
         getBookText("201002", this.state.chapter[0].cid).then(res => {
                if (res) {
                    data.push({
                    title: res.title,
                    p:res.content
                })
                this.setState({
                    data:data
                })
                } else {
                    console.log(1)
                }
            })
       })
    }
/* 上拉加载 react官方组件 */
handleAction = (action) => {
    console.info(action, this.state.action,action === this.state.action);
    //new action must do not equel to old action
    if(action === this.state.action ||
        action === STATS.refreshing && this.state.action === STATS.loading ||
        action === STATS.loading && this.state.action === STATS.refreshing){
        console.info("It's same action or on loading or on refreshing ",action, this.state.action,action === this.state.action);
        // return false
    }

    if (action === STATS.refreshing) {//刷新
        console.log(1)
        // setTimeout(()=>{
        //     //refreshing complete
        //     console.log(1)
        //     this.setState({
        //         data: cData,
        //         hasMore: true,
        //         action: STATS.refreshed,
        //         index: loadMoreLimitNum
        //     });
        // }, 3000)
    } else if(action === STATS.loading){//加载更多
        this.setState({
            hasMore: true
        });
        setTimeout(()=>{
            if(this.state.index === 0){
                this.setState({
                    action: STATS.reset,
                    hasMore: false
                });
            } else { 
                let data = []
                let a = 1
                console.log(num)
                getBookText("201002", this.state.chapter[++num].cid).then(res => {
                    if (res) {
                        data.push({
                            title: res.title,
                            p:res.content
                        })
                    } else {
                        a=0
                    }                  
                    this.setState({
                        data: [...this.state.data,...data],
                        action: STATS.reset,
                        index: a
                    });
                })
               
            }
        }, 3000)
    }

    //DO NOT modify below code
    this.setState({
        action: action
    })
}

getScrollTop = ()=>{
    if (this.refs.reactpullload) {
        console.log(1)
        console.info(this.refs.reactpullload.getScrollTop());
    }
}
setScrollTop = ()=>{
    if (this.refs.reactpullload) {
        console.log(2)
        console.info(this.refs.reactpullload.setScrollTop(100));
    }
}

    render() {
        const history = creatHistory()
        const {
			data,
			hasMore
		} = this.state
        return (
            <div className="w-100 h-100">
                <div className='PL'>
                    <Drawer
                    title={this.state.title}
                    placement="left"
                    closable={false}
                    onClose={this.onClose}
                    visible={this.state.visible}
                    >
                        {this.state.chapter.map((item, index) => {
                            return (
                                <p className="border-bottom py-1 " style={{ color:num===index?"#b93321":"222"}}
                                 key = { index } onClick = {(e) => {
                                    
                                    num = index
                                    getBookText('201002', `${item.cid}`).then(res => {
                                        this.setState({
                                            data: [{
                                                title: res.title,
                                                p: res.content
                                            }]
                                        })
                                        this.onClose()
                                    })
                                }}>{item.title}</p>
                            )
                    })}
                    
                    </Drawer>
                </div>
                <div className="w-100 h-100 te" style={{ background: "#EEE6DD" }} ref='div'  onClick={() => {
                    console.log(1)
                    this.refs.hidden.style.visibility='visible'
                    this.refs.block.style.opacity= "1"
                    this.refs.block1.style.opacity= "1"
                    this.refs.block.style.transform = "translateY(0)"
                    // this.refs.block1.style.transform = " all .1s ease;"
                    this.refs.block1.style.transform = "translateY(0)"
                }}>
                    <div className='w-100 h-100 font-small' style={{ overflow: "auto" }} ref='boss'>
                            <ReactPullLoad
                                downEnough={50}
                                ref="reactpullload"
                                loading
                                className="block"
                                isBlockContainer={true}
                                action={this.state.action}
                                handleAction={this.handleAction}
                                hasMore={hasMore}
                                style={{paddingTop: 0}}
                                distanceBottom={1000}>
                                
                                    {
                                        data.map( (str, index )=>{
                                            return  <div className='px-1 py-1 w-100 h-100' style={{ overflow: "auto" }}  key={index}>
                                                <div className='py-1' >{str.title}</div>
                                               <div  className='bookbox' ref='boss1' dangerouslySetInnerHTML={{ __html: str.p}}  >
                                                
                                              </div>
                                            </div>
                                        })
                                    }
                                
                        </ReactPullLoad>
                        </div>
                   
                </div>
                <div className="page-read-option show-panel" ref='hidden' onClick={() => {
                   
                   this.refs.block.style.opacity= "0"
                   this.refs.block1.style.transform = "translateY(3.2rem)"
                    this.refs.block1.style.opacity = "0"
                    this.refs.hidden.style.visibility='hidden'
                }}>
                    <div className="top-controll-bar flex align-center " ref='block'>
                        <span className="back"><i className="iconfont icon-back pl-1"></i> <i
                            onClick={(e) => { e.stopPropagation();history.goBack()}}>返回</i></span>
                        <h1 className='text-white'>超级兵王</h1>
                        <span className="menu pr-2">
                            <i className="iconfont icon-menu"></i>
                            <ul className="drop-down ">
                                <li><div className='flex justify-center' ><i className="iconfont icon-shouye1 text-hover-light px-1"></i><span  onClick={(e) => { e.stopPropagation();history.push('/member')}}>首页</span></div></li>
                                <li><div className='flex justify-center'><i className="iconfont icon-shujia4 text-hover-light  px-1"></i><span>书架</span></div></li>
                                <li><div className='flex justify-center border-0 '><i className="iconfont icon-menu text-hover-light  font-smaller  px-1"></i><span>详情</span></div></li>
                            </ul>
                        </span>
                    </div>
                    <div className="bottom-controll-panel" ref='block1'>
                        <div className="toBookShelf">加入书架</div>
                        <div className="item flex align-center justify-center" style={{margin:"0 auto"}}>
                            <span className="btn font-btn-w disable font-smaller" onClick={
                                (e) => {
                                    e.stopPropagation()
                                    let size = this.refs.size.style.width
                                    console.log(size)
                                    switch (size) {
                                        case "0px":
                                            this.refs.boss.style.fontSize='0.18rem'
                                            e.target.style.color="#888"
                                            break;
                                        case "25%":
                                            for (var i in document.querySelectorAll("p")) {
                                                if (document.querySelectorAll("p")[i].localName === 'p') {
                                                    document.querySelectorAll("p")[i].style.fontSize = "0.16rem"
                                               }
                                            }
                                            this.refs.boss.style.fontSize='0.18rem'
                                            this.refs.size.style.width = "0px"
                                            e.target.style.color="#888"
                                            break;
                                        case "50%":
                                            for (var i in document.querySelectorAll("p")) {
                                                if (document.querySelectorAll("p")[i].localName === 'p') {
                                                    document.querySelectorAll("p")[i].style.fontSize = "0.18rem"
                                               }
                                            }
                                            this.refs.boss.style.fontSize='0.2rem'
                                            this.refs.size.style.width = "25%"
                                        
                                          
                                            break;
                                        case "75%":
                                            for (var i in document.querySelectorAll("p")) {
                                                if (document.querySelectorAll("p")[i].localName === 'p') {
                                                    document.querySelectorAll("p")[i].style.fontSize = "0.20rem"
                                               }
                                            }
                                            this.refs.boss.style.fontSize='0.22rem'
                                            this.refs.size.style.width = "50%"
                                            break;
                                        case "100%":
                                            for (var i in document.querySelectorAll("p")) {
                                                if (document.querySelectorAll("p")[i].localName === 'p') {
                                                    document.querySelectorAll("p")[i].style.fontSize = "0.22rem"
                                               }
                                            }
                                            this.refs.boss.style.fontSize='0.24rem'
                                            this.refs.size.style.width = "75%"
                                            this.refs.A2.style.color="#fff"
                                            break;
                                        default:return
                                    }
                                    
                                }
                            } style={{color:"#888"}} ref='A1'>Aa-</span>
                            <span className="btn progress-bar flex">
                                <span className="content" style={{
                                    width: "0px", height: '0.0333rem', background: "#B93221",
                                    borderRadius: ".02667rem",display:"block"
                                }} ref='size'></span>
                            </span>
                            <span className="btn font-btn-w font-smaller" onClick={(e) => {
                                e.stopPropagation()
                                console.log(document.querySelectorAll("p"))
                                let size = this.refs.size.style.width
                                
                                console.log(size)
                                switch (size) {
                                    case "0px":
                                        for (var i in document.querySelectorAll("p")) {
                                            if (document.querySelectorAll("p")[i].localName === 'p') {
                                                document.querySelectorAll("p")[i].style.fontSize = "0.18rem"
                                           }
                                        }
                                      console.log(document.querySelectorAll("p"))  
                                        this.refs.size.style.width = "25%"
                                        this.refs.A1.style.color = "#fff"
                                        this.refs.boss.style.fontSize='0.2rem'
                                        break;
                                    case "25%":
                                        for (var i in document.querySelectorAll("p")) {
                                            if (document.querySelectorAll("p")[i].localName === 'p') {
                                                document.querySelectorAll("p")[i].style.fontSize = "0.20rem"
                                           }
                                        }
                                       
                                        this.refs.boss.style.fontSize='0.22rem'
                                        this.refs.size.style.width = "50%"
                                        break;
                                    case "50%":
                                        for (var i in document.querySelectorAll("p")) {
                                            if (document.querySelectorAll("p")[i].localName === 'p') {
                                                document.querySelectorAll("p")[i].style.fontSize = "0.22rem"
                                           }
                                        }

                                        this.refs.boss1.style.fontSize = "0.22rem"
                                        this.refs.boss.style.fontSize='0.24rem'
                                        this.refs.size.style.width = "75%"
                                        break;
                                    case "75%":
                                        for (var i in document.querySelectorAll("p")) {
                                            if (document.querySelectorAll("p")[i].localName === 'p') {
                                                document.querySelectorAll("p")[i].style.fontSize = "0.24rem"
                                           }
                                        }
                                        this.refs.boss.style.fontSize='0.26rem'
                                        this.refs.size.style.width = "100%"
                                        e.target.style.color="#888"
                                        break;
                                    case "100%":
                                        this.refs.boss.style.fontSize='0.26rem'
                                        e.target.style.color="#888"
                                        break;
                                    default:return
                                }
                            }} ref='A2'>Aa+</span>
                        </div>
                        <div className="item clearfix flex justify-between">
                            <span className="font-smaller text-white flex align-center justify-center btncolor" ref='a' onClick={this.bgcolor.bind(this,'a')} style={{borderColor:"#B93221",color:"#B93221"}}>默认</span>
                            <span className="font-smaller text-white flex align-center justify-center btncolor" ref='b' onClick={this.bgcolor.bind(this,'b')}>夜间</span>
                            <span className="font-smaller text-white flex align-center justify-center btncolor" ref='c' onClick={this.bgcolor.bind(this,"c")}>护眼</span>
                        </div>
                        <div className="item clearfix flex justify-between">
                            <span className="btn chapter-btn-w f-l disable" onClick={this.Lastchapter.bind(this)}>上一章</span>
                            <span className="btn directory" style={{color:"#a8a8a8"}} onClick={this.showDrawer}>目录</span>
                            <span className="btn chapter-btn-w  mr0 f-r" onClick={this.Nextchapter.bind(this)}>下一章</span>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}
 
export default Read